<template>
  <div class="count">
    <h2>当前求和为：{{ sum }} , 放大10倍后： {{ bigSum }}</h2>
    <h2>姓名大写： {{ upperName }}</h2>
    <h3> 姓名： {{ name }}</h3>
    <h3> 年龄： {{ age }}</h3>
    <h3> 性别： {{ gender }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>
</template>

<script setup lang="ts" name="Count">
// 引入store
import useCountStore from "@/store/count";
import { ref, toRef, toRefs } from "vue";
import { storeToRefs } from 'pinia'

// 使用useCountStore函数 获取到 实例对象 store
const countStore = useCountStore()
// console.log('count_store',countStore)


// storeToRefs 只会关注 store 中的数据 ， 不会对方法进行 ref 包裹 
// console.log('toRefs(countStore): ',storeToRefs(countStore))
const { sum, name, age, gender,upperName,bigSum } = storeToRefs(countStore)
// const { sum, name, age, gender } = toRefs(countStore)
// console.log('countStore:', countStore)



// 数据
let n = ref(1) // 用户选择的数字

// 方法
function add() {
  //第一种方式： 修改数据
  // countStore.sum += n.value
  // countStore.gender = '女'
  // countStore.name = '黑马程序员'


  // 第二种方式：调用方法 批量修改数据
  // countStore.$patch({
  //   sum: 888,
  //   gender: '女',
  //   name: '黑马程序员'
  // })

  // 第三种方式：调用方法 修改数据
  countStore.increment(n.value)

}
function minus() {
  countStore.sum -= n.value
}
</script>

<style scoped>
.count {
  background-color: skyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}

select,
button {
  margin: 0 5px;
  height: 25px;
}
</style>